{extend name='table'}

{block name="button"}
    <button class="layui-btn layui-btn-sm" data-modal='{:url("add")}' data-title="添加门禁设备">
        <i class="layui-icon layui-icon-add-1"></i> 添加设备
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" data-modal='{:url("statistics")}' data-title="设备统计">
        <i class="layui-icon layui-icon-chart"></i> 统计
    </button>
{/block}

{block name="search"}
    <div class="layui-form layui-form-pane form-search" id="DeviceSearchForm">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">关键词</label>
            <div class="layui-input-inline">
                <input name="name" value="{$get.name|default=''}" placeholder="设备名称/SN" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="">- 全部 -</option>
                    <option value="1" {if input('get.status') == '1'}selected{/if}>启用</option>
                    <option value="0" {if input('get.status') == '0'}selected{/if}>禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <button class="layui-btn" data-table-search><i class="layui-icon layui-icon-search"></i> 搜 索</button>
            <button class="layui-btn layui-btn-primary" data-table-reset><i class="layui-icon layui-icon-refresh-1"></i> 重 置</button>
        </div>
    </div>
{/block}

{block name="content"}
    <table id="DeviceTable" data-url="{:sysuri('index')}" data-target-search="form.form-search"></table>
{/block}

{block name="script"}
<script>
layui.use(['jquery'], function () {
    var $ = layui.$;
    let cols = [
        {type: 'checkbox'},
        {field: 'id', title: 'ID', width: 80, sort: true},
        {field: 'sn', title: '设备序列号', width: 160},
        {field: 'name', title: '设备名称', width: 160},
        {field: 'store_name', title: '所属门店', width: 160},
        {field: 'online_status', title: '在线状态', width: 100, align: 'center', templet: function(d){return d.online_status==1?'<span class="color-green">在线</span>':'<span class="color-red">离线</span>'}},
        {field: 'last_heartbeat_time', title: '最后心跳', width: 170},

        {field: 'status', title: '状态', width: 90, templet: function(d){return d.status==1?'<span class="color-green">启用</span>':'<span class="color-red">禁用</span>'}},
        {field: 'create_time', title: '创建时间', width: 170, sort: true},
        {toolbar: '#ToolbarTpl', title: '操作', minWidth: 200, fixed: 'right'}
    ];
    $('#DeviceTable').layTable({
        even: true,
        height: 'full-200',
        cols: [cols]
    });
});
</script>

<script type="text/html" id="ToolbarTpl">
    <a class="layui-btn layui-btn-xs" data-title="编辑设备" data-modal='{:url("edit")}?id={{d.id}}'>编 辑</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" data-confirm="确定重置该设备密码吗？" data-action='{:url("resetPassword")}' data-value="id={{d.id}}">重置密码</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-confirm="确定要删除该设备吗？" data-action='{:url("remove")}' data-value="id={{d.id}}">删 除</a>
</script>
{/block}
